<template>
  <div class="liveplayer">
    <el-row :gutter="20">
      <el-col :span="8" v-for="(item,index) in videoList" :key="index" style="margin-bottom: 20px;">
        <LivePlayer :videoUrl="item" fluent autoplay live stretch ></LivePlayer>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LivePlayer from '@liveqing/liveplayer' // vue2
export default {
  name: 'liveplayer',
  components: {
    LivePlayer
  },
  data() {
    return {
      videoList:[
        'https://cloud.liveqing.com:1443/flv/vlive/s80deoAZg.flv',
        'wss://cloud.liveqing.com:1443/ws-flv/vlive/s80deoAZg.flv',
        'webrtcs://cloud.liveqing.com:1443/rtc/vlive/s80deoAZg',
        'https://cloud.liveqing.com:1443/vhls/s80deoAZg/s80deoAZg_live.m3u8',
        'https://cloud.liveqing.com:1443/flv/vlive/s80deoAZg.flv',

        'https://cloud.liveqing.com:1443/flv/hls/test001.flv',//http-flv
        'wss://cloud.liveqing.com:1443/ws-flv/hls/test001.flv',//ws-flv
        'webrtcs://cloud.liveqing.com:1443/rtc/hls/test001',//webrtc
        'https://cloud.liveqing.com:1443/hls/test001/test001_live.m3u8',//hls

        'https://www.runoob.com/try/demo_source/mov_bbb.mp4',
        'rtmp://cloud.liveqing.com:10085/hls/test001',//rtmp需要flash插件播放
        'rtmp://ns8.indexforce.com/home/mystream',//美国1
        'rtmp://media3.scctv.net/live/scctv_800',//美国2
        // 'rtsp://cloud.liveqing.com:10554/hls/test001',//rtsp不能直接在浏览器中播放 RTSP， 推荐使用 LiveNVR 拉转 RTSP 成 WebRTC、FLV、WS_FLV、HLS、RTMP 来间接支持
      ]
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    
  }
}
</script>